<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/common.css">
	<style type="text/css">
		input::placeholder{
			color: #bbb;
		}
		.m-ipt{
			-webkit-appearance: none;
		    background-color: #fff;
		    background-image: none;
		    border-radius: 4px;
		    border: 1px solid #dcdfe6;
		    box-sizing: border-box;
		    color: #606266;
		    display: inline-block;
		    font-size: inherit;
		    height: 32px;
		    line-height: 32px;
		    outline: none;
		    padding: 0 10px;
		    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    width: 100%;
		}
		.m-ipt:focus {
		    outline: none;
		    border-color: #409eff;
		}
	</style>
</head>

<body>

	<!-- MAIN -->
	<div class="main" id="app">
		<!-- 获取省份容器 -->
		<div class="data-box" data-provinces='{%:json_encode($provinces)%}' ></div> 
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>订单管理</li>
			    <li>添加订单</li>
			</ul>
			<hr>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<div class="col-sm-4 form-horizontal">
					    <div class="form-group">
						    <label class="col-sm-3 control-label">快速识别</label>
						    <div class="col-sm-5">
						        <textarea class="form-control" rows="2" style="resize: none;" v-model="konwAddrText"></textarea>
						    	<!--<input class="m-ipt"  v-model="konwAddrText" type="text">-->
						    </div>
						    <button type="button" class="btn btn-success" @click="knowBaiduAddr()">识别</button>
						</div>
						<div class="form-group">
						    <label class="col-sm-3 control-label">客户</label>
						    <div class="col-sm-5">
						    	<input class="m-ipt" v-model="order.cust" type="text">
						    </div>
						</div>
						<div class="form-group">  
						    <label class="col-sm-3 control-label">电话</label>
						    <div class="col-sm-5">
						    	<input class="m-ipt" v-model="order.phone" type="text">
						    </div>
						</div>
						<div class="form-group">  
						    <label class="col-sm-3 control-label">支付方式</label>
						    <div class="col-sm-5">
						    	<select class="m-ipt" v-model="order.pay_type">
						    		<option value="">- 选择 -</option>
						    		{%volist name="pay_types" id="vo"%}
						    		<option value="{%$key%}"> {%$vo%}</option>
						    		{%/volist%}
						    	</select>
						    </div>
						</div>
					</div>
					<div class="col-sm-4 form-horizontal">
						<div class="form-group">
						    <label class="col-sm-3 control-label">地区</label>
						    <div class="col-sm-4">
						    	<select class="m-ipt" v-model="order.province" @change="getCities">
						    		<option value="">- 省份 -</option>
						    		{%volist name="provinces" id="vo"%}
						    		<option value="{%$vo.id%}"> {%$vo.name%}</option>
						    		{%/volist%}
						    	</select>
						    </div>
						    <div class="col-sm-4">
						    	<select class="m-ipt" v-model="order.area_id" @change="getArea">
						    		<option value="">- 市/区 -</option>
						    		<option :value="city.id" v-for="city in cities"> {{ city.name }} </option>
						    	</select>
						    </div>
						</div>
						<div class="form-group">
						    <label class="col-sm-3 control-label">详细地址</label>
						    <div class="col-sm-8">
						    	<textarea class="form-control" rows="2" style="resize: none;" v-model="order.detail_addr"></textarea>
						    </div>
						</div>
					</div>
					<div class="col-sm-4 form-horizontal">
						<div class="form-group">  
						    <label class="col-sm-3 control-label">接单日期</label>
						    <div class="col-sm-5">
						    	<input class="m-ipt" name="recv_day" type="text" onclick="WdatePicker()">
						    </div>
						</div>
						<div class="form-group">  
						    <label class="col-sm-3 control-label">支付运费</label>
						    <div class="col-sm-5">
						    	<input class="m-ipt" v-model="order.exp_cost" type="text">
						    </div>
						</div>
					</div>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover">
						<thead>
							<tr>
								<th>商品</th>
								<th>尺码</th>
								<th>颜色</th>
								<th>数量</th>
								<th>单价</th>
								<th>运费/包装</th>
								<th>物流公司</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,i) in items">
								<td style="width: 150px;">
									<a :href="item.goods_pic" title='点击看大图' target="_BLANK">
										<img :src="item.goods_pic" height="50">
									</a>
									{{ item.goods_name }}
								</td>
								<td style="width: 100px;">
									<select class="m-ipt" v-model="item.spec">
										<option value=""> -尺码- </option>
										<option :value="val" v-for="val in item.size_set"> {{ val }} </option>
									</select>
								</td>
								<td><input type="text" class="m-ipt" v-model="item.color" size="5"></td>
								<td><input type="text" class="m-ipt" v-model="item.qty" size="5"></td>
								<td><input type="text" class="m-ipt" v-model="item.price" size="5"></td>
								<td><input type="number" class="m-ipt" v-model="item.pack_price" size="5"></td>
								
								<td style="width: 105px;">
									<select class="m-ipt" v-model="item.express">
										<option value=""> -物流公司- </option>
										<option :value="val" v-for="val in expresses"> {{ val }} </option>
									</select>
								</td>
								<td><input type="text" class="m-ipt" v-model="item.remarks"></td>
								<td>
									<a href="#" style="color:red" @click="removeItem(i)"><i class="fa fa-trash-o"></i> 删除</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- 数据结束-->	
				<div class="row">
					<a class="btn btn-primary" @click="showGoods()">选择商品</a>
					<button type="button" class="btn btn-success" @click="save()" :disabled="locked">保存</button>
				</div>
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<vue-modal :visible.sync="showModal" title="选择商品">
			<div class="container">
				<form class="form-inline" style="margin: 10px 0px;">
					<vue-select 
						placeholder="类别"
						v-model="search.cate_name"
						url="{%:url('Goods/getCateListBySort')%}"
						:sorts ="['衣服','下装','鞋','箱包','饰品']"
						style="display: inline-block;width: 100px;">
					</vue-select>
					<vue-select 
						placeholder="品牌"
						v-model="search.brand_name"
						url="{%:url('Brand/getListBySort')%}"
						:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
						style="display: inline-block;width: 100px;">
					</vue-select>
					<vue-select 
						placeholder="销售"
						v-model="search.acct_name"
						url="{%:url('Account/getSalers')%}"
						style="display: inline-block;width: 100px;">
					</vue-select>
				    <button type="button" class="btn btn-primary" @click="getGoods()">查询</button>
				</form>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>选择</th>
							<th>商品图</th>
							<th>类别</th>
							<th>品牌</th>
							<th>尺码组</th>
							<th>添加者</th>
							<th>添加时间</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="row in rows">
							<td><input type="checkbox" v-model="sel_goods" :value="row.id"></td>
							<td>
								<a :href="row.goods_pic" title='点击看大图' target="_BLANK">
									<img :src="row.pic_tmb" height="50" class="pre_view">
								</a>
							</td>
							<td>{{ row.cate_name }}</td>
							<td>{{ row.brand }}</td>
							<td>{{ row.size_set }}</td>
							<td>{{ row.acct_name }}</td>
							<td>{{ row.add_time }}</td>
						</tr>
						<tr v-if="rows.length===0">
							<td colspan="8" style="color:red">查询无记录</td>
						</tr>
					</tbody>
				</table>
				<div class="row">
					<div class="col-sm-8">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getGoods'></vue-page>
					</div>
					<div class="col-sm-4" style="line-height: 75px;">
						<button class="btn btn-success" @click="handleOk">确定</button>
					</div>
				</div>
			</div>
		</vue-modal>
		<!-- 订单确认 -->
		<!-- 多选采购商弹框 -->
		<el-dialog
		title="信息确认"
		:visible.sync="orderDialog"
		@close="closeOrderDialog"
		width="30%">

			<div >
				<div  style="display:flex;flex-direction: column;">
					<span>客户：{{orderInfo.cust}}</span>
					<span >电话：{{orderInfo.phone}}</span>
					<span v-for="(item,index) in orderInfo.items" :key="item.id">商品{{index+1}}：{{item.goods_name}},颜色：{{item.color}},尺码：{{item.spec}},数量：{{item.qty}}</span>
					<span>地址：{{orderInfo.addr}}</span>
				</div>
				<!-- <el-input v-model="name" placeholder="请输入内容">
				</el-input> -->
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="copyFn" class="clickboard">一键复制</el-button>
				<el-button type="primary" @click="orderDialog=false" >确 定</el-button>
			</span>
		</el-dialog>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/smartParsePro/pcasCode.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/smartParsePro/zipCode.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/smartParsePro/address_parse.js"></script>
	<!-- 一键复制 -->
	<script src="__STATIC__/assets/scripts/clipboard.min.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
	<script type="text/javascript">
// 	let smart = smart("陕西省西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810")
// 	console.log({smart})
        

					
		// 获取省份
		let dataContainerElem = document.querySelector('.data-box');
		let data = dataContainerElem ? dataContainerElem.dataset : {};
		dataBox = {}; //模板变量容器，`.data-box`类选择器所在的所有`data`属性值集合  
		Object.keys(data).forEach(function (key) {  
			dataBox[key] = data[key];  
			if (isJsonString(data[key])) dataBox[key] = JSON.parse(data[key]); //是json格式的字串才转对象  

		});  
		/**  

		* 判断字串是否属于json字串  

		*/ 
		function isJsonString(str) {  

		let flag = false;  

		if (typeof str != 'string') return flag;  

		try {  

			JSON.parse(str);  
			flag = true;  
		} catch (e) {}  
		return flag;  

		} 
		let provinces = dataBox.provinces;


		var vm = new Vue({
			el: '#app',
			data: {
				konwAddrText:'',
				order: {
					cust: '',
					phone: '',
					pay_type: '',
					exp_cost: 0,
					province: '',
					area_id: '',
					detail_addr: ''
				},
				items: [],
				cities: [],
				showModal: false,
				search: {
					cate_name: '',
					brand_name: '',
					acct_name: ''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				sel_goods: [],
				expresses: ['顺丰陆运寄付','顺丰陆运到付','顺丰空运寄付','顺丰空运到付','中通','圆通'],
				locked: false,
				orderDialog:false,
				orderInfo:{},//订单信息
				// orderInfo:{
				// 	id: 11429, order_no: "22090053", cust: "李易峰", phone: "17864110040", pay_type: "支付宝", addr: "重庆市沙坪坝区",
				// 	items:[
				// 		{id: 18830, order_sn: 1, pic: "/uploads_/goods/2209/12/631ec8f5c0fda.png",goods_name:"APT恤",color:"黑色",spec:"39",qty:1},
				// 		{id: 18830, order_sn: 1, pic: "/uploads_/goods/2209/12/631ec8f5c0fda.png",goods_name:"APT恤",color:"黑色",spec:"39",qty:1}
				// 	]
				// }
			},
			components: {
				'vue-modal': vueModal,
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			methods:{
			    knowAddr: function(){
			        
			        var _this = this;
			        let res = smart(_this.konwAddrText)
			        let data = {
			            'province':res.province||'',
			            'city':res.city||'',
			             'county':res.county ||'',
			             'address':res.address||'',
			             'name':res.name||'',
			             'phone':res.phone||''
			        }
			        console.log(data);
			        _this.order.cust = data.name
					_this.order.phone = data.phone
					console.log({provinces});
					let provincesRes = provinces.filter(item=>item.name==data.province);
					_this.order.province = provincesRes[0]&&provincesRes[0]['id']
					$.post("{%:url('Area/getList')%}?page_size=50",{
						parent_id: _this.order.province,
    				},function(rsp){
    				    _this.cities = rsp.data.rows;
    				    let city = data.province==data.city?data.county:data.city;
						let cities = _this.cities.filter(item=>item.name==city);
						_this.order.area_id = cities[0]['id'];

					},'json')
					_this.order.area_id = '',
    				_this.order.detail_addr = data.province + data.city +data.county +  data.address + ','+data.name+','+data.phone
    					
    					
			     //   axios({
        //               method: "post",
        //               url: "https://wangzc.wang/smAddress",
        //               data: {
        //                 address: _this.konwAddrText,
        //               },
        //             }).then(function (res) {
        //                 let data = res.data;
    				// 	_this.order.cust = data.name
    				// 	_this.order.phone = data.phone
    				// 	console.log({provinces});
    				// 	let provincesRes = provinces.filter(item=>item.name==data.province);
    				// 	_this.order.province = provincesRes[0]&&provincesRes[0]['id']
    				// 	$.post("{%:url('Area/getList')%}?page_size=50",{
    				// 		parent_id: _this.order.province,
        // 				},function(rsp){
        // 				    _this.cities = rsp.data.rows;
        // 				    let city = data.province==data.city?data.county:data.city;
    				// 		let cities = _this.cities.filter(item=>item.name==city);
    				// 		_this.order.area_id = cities[0]['id'];

    				// 	},'json')
    				// 	_this.order.area_id = '',
    				// 	_this.order.detail_addr = data.province + data.city +data.county +  data.address + ','+data.name+','+data.phone
        //             });
			    },
				knowBaiduAddr: function(){
					var _this = this;
			        $.post("{%:url('index/get_address')%}",{
						text: _this.konwAddrText,
    				},function(rsp){
    				    let res = rsp.data;
						let data = {
							'province':res.province||'',
							'city':res.city||'',
							'county':res.county ||'',
							'address':res.detail||'',
							'name':res.person||'',
							'phone':res.phonenum||''
						}
						_this.order.cust = data.name
						_this.order.phone = data.phone
						let provincesRes = provinces.filter(item=>item.name==data.province);
						_this.order.province = provincesRes[0]&&provincesRes[0]['id']
						$.post("{%:url('Area/getList')%}?page_size=50",{
							parent_id: _this.order.province,
						},function(rsp){
							_this.cities = rsp.data.rows;
							let city = data.province==data.city?data.county:data.city;
							let cities = _this.cities.filter(item=>item.name==city);
							_this.order.area_id = cities[0]['id'];

						},'json')
						_this.order.detail_addr = data.province + data.city +data.county +  data.address + ','+data.name+','+data.phone

					},'json')
			        
			        
			    },
				getCities: function(){
					var parent_id = this.order.province;
					var _this = this;
					$.post("{%:url('Area/getList')%}?page_size=50",{
						parent_id: parent_id,
					},function(rsp){
						_this.cities = rsp.data.rows;
						_this.order.area_id = '';

					},'json')
				},
				// 自动获取省份
				getArea:function(){
				    
				// 	let provinceId = this.order.province;
				// 	let areaId = this.order.area_id;
				// 	let provincesName = provinces.filter(item=>item.id==provinceId);
				// 	let areaName = this.cities.filter(item=>item.id==areaId);
				// 	this.order.detail_addr = provincesName[0]['name']+areaName[0]['name']+this.order.detail_addr;
				},
				getGoods: function(page){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Goods/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
						_this.sel_goods = [];
					},'json')
				},
				showGoods: function(){
					this.showModal = true;
					this.getGoods(1);
				},
				removeItem(i){
					this.items.splice(i,1);
				},
				handleOk: function(){
					for(var i in this.rows){
						var row = this.rows[i];
						if (this.sel_goods.indexOf(row.id) >= 0) {
							var info = {
								goods_id: row.id,
								goods_pic: row.goods_pic,
								goods_name: row.brand + row.cate_name,
								size_set: row.size_set.split(','),
								spec: '',
								color: '',
								qty: '',
								price: '',
								dangkou: '',
								dangkou_no: '',
								express: '',
								remarks: ''
							};
							this.items.push(info);
						}
					}
					this.showModal = false;
				},
				save: function(){
					this.locked = true;

					var info = this.order;
					info.recv_day = $("input[name='recv_day']").val();
					var data = {
						info: info,
						items: this.items
					};
					var _this = this;
					$.post("{%:url('Orders/handle')%}",data,function(rsp){
						// alert(rsp.msg);
						// if (rsp.code) {
						// 	location.href = "{%:url('Orders/add')%}"
						// }
						if (rsp.code == 1) {
							_this.$message.success(rsp.msg);
							_this.orderDialog = true;
							_this.getOrder(rsp.data.id);
						}else{
							_this.$message.error(rsp.msg);
						}
						_this.locked = false;
						
					},'json')
				},
				closeOrderDialog(){
					location.href = "{%:url('Orders/add')%}"
				},
				// 复制文本
				copyFn() {
					let t = this;
					// 获取复制文本
					let cust ='客户：'+t.orderInfo.cust+'\n';
					let phone = '电话：'+t.orderInfo.phone+'\n';
					let goodsInfo = '';
					t.orderInfo.items.forEach((item,index)=>{
						goodsInfo = goodsInfo+`商品${index+1}：${item.goods_name},颜色：${item.color},尺码：${item.spec},数量：${item.qty}`+'\n';
					})
					let addr = `地址：${t.orderInfo.addr}`;
					let res = cust+phone+goodsInfo+addr;
					var clickBoard = new ClipboardJS(".clickboard", {
						text: () => {
							return res;
						}
					});
					//复制成功
					clickBoard.on("success", (e) => {

						t.$message.success('复制成功');
						// 清除对象
						clickBoard.destroy();
					});
					//复制失败
					clickBoard.on("error", (e) => {
						t.$message.error('复制失败');
					})
				},

				// 获取订单详情
				getOrder(id){
					let t = this;
					$.post("{%:url('Orders/detail')%}",{id},function(rsp){
						if (rsp.code == 1) {
							t.orderInfo = rsp.data.info;
						}
					},'json')
				}
			}
		});
	</script>
</body>

</html>